<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue体验</title>
</head>
<body>
    <h3>使用原生的js方式实现效果</h3>
    <div>
        数量: <input type="text" id="num" oninput="changeNum()">
    </div>
    <div>
        价格: <input type="text" id="price" oninput="changePrice()">
    </div>
    <div>
        总计:  <span id="total">00</span>
    </div>
    <script>
        // 设置默认值
        document.getElementById("num").value =1;
        document.getElementById("price").value =1;
        document.getElementById("total").value =1;
        function changeNum() {
            var num =document.getElementById("num").value;
            document.getElementById("total").innerText = Number(num) * Number(document.getElementById("price").value)
        }
        function  changePrice(){
            var price = document.getElementById("price").value;//获取到数量
            document.getElementById("total").innerText = Number(price) * Number(document.getElementById("num").value)
        }
    </script>
</body>
</html>